<template>
  <div class="pgsrch">
    <input
      type="text"
      class="srch"
      autocomplete="off"
      v-model="keyword"
      @keydown.enter="search"
      @focus="suggestFlag(true)"
      @blur="suggestFlag(false)"
    />
    <a
      hidefocus="true"
      href="javascript:void(0)"
      class="btn"
      title="搜索"
      @mouseup="search"
      >搜索</a
    >
    <SearchAdvice :keyword="keyword" :flag="flag"></SearchAdvice>
  </div>
</template>

<script>
import SearchAdvice from "@/encapsulation/searchAdvice/SearchAdvice.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "SearchInput",
  components: { SearchAdvice },
  setup() {
    let keyword = ref("");
    let router = useRouter();

    let flag = ref(true);
    function search() {
      router.push({
        name: "search",
        query: {
          s: keyword.value,
        },
      });
    }
    function suggestFlag(v) {
      flag.value = v;
    }

    return {
      keyword,
      search,
      suggestFlag,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.pgsrch {
  position: relative;
  width: 420px;
  height: 40px;
  margin: 0px auto;
  background-position: 0px 0px;
  z-index: 10;
  .srch {
    float: left;
    width: 320px;
    height: 17px;
    margin: 12px 0px 0px 20px;
    padding: 0px;
    background: rgb(255, 255, 255);
    border: none;
  }
  .btn {
    float: right;
    width: 50px;
    height: 40px;
    text-indent: -9999px;
  }
  .u-lstlay {
    top: 43px;
    width: 418px;
  }
}
.u-lstlay {
  position: absolute;
  z-index: 120;
  left: 0;
  box-sizing: border-box;
  border: 1px solid #bebebe;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 7px #555;
  text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
}
.note {
  height: 17px;
  padding: 11px 10px;
  border-bottom: 1px solid #e2e2e2;
}
.hd {
  float: left;
  width: 52px;
  margin-right: -100px;
  padding: 10px 0 0 10px;
  border-right: 1px solid #e2e2e2;
  line-height: 17px;
  font-weight: normal;
  .icn {
    float: left;
    margin: 2px 4px 0 0;
  }
}
.u-icn-26 {
  width: 14px;
  height: 15px;
  background-position: -35px -300px;
}
.m-schlist {
  ul {
    margin-left: 62px;
    margin-top: -1px;
    padding: 6px 0 5px;
    border-top: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
  }
  .odd {
    background: #f9f8f8;
  }
  li {
    width: 100%;
    float: left;
    a {
      display: block;
      width: 100%;
      text-indent: 12px;
      line-height: 24px;
    }
  }
}
.u-icn-27 {
  background-position: -50px -300px;
}
.u-icn-28 {
  background-position: -35px -320px;
}
.u-icn-29 {
  background-position: -50px -320px;
}
</style>
